<!--抽屉-->
<template>
  <el-drawer class="drawerWrapper" v-on="$listeners" v-bind="$attrs">
    <div v-if="isShowCloseIcon" class="closeIcon" @click="click">
      <i class="iconfont icon-a-dropdownicon1"></i>
    </div>
    <slot />
  </el-drawer>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
  props: {
    isShowCloseIcon: {
      type: Boolean,
      default: false,
    },
  },
})
export default class Drawer extends Vue {
  click() {
    this.$emit('on-close-drawer')
  }
}
</script>

<style lang="scss">
.el-drawer__wrapper {
  .el-drawer__body {
    padding: 20px;
    background: #171821 !important;
    &::-webkit-scrollbar {
      height: 0;
      width: 0;
      color: transparent;
    }
  }
}

.drawerWrapper {
  .closeIcon {
    cursor: pointer;
    position: absolute;
    z-index: 100;
    top: 50%;
    margin-top: -50%;
    margin-left: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid #b5bfd6;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;

    i {
      font-size: 12px;
    }
  }
}
</style>
